<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生宿舍管理系统</title>
    <style>
        .login {
            background: #f8f8f8;
            height: auto;
        }

        .login #header {
            height: auto;
            padding: 15px 16px;
            justify-content: center;
        }

        .login #header h1 {
            font-size: 18px;
        }

        .login #header h1 a {
            color: #fff;
        }

        .login #content {
            padding: 20px 20px 0;
        }

        .login #container {
            background: #fff;
            border: 1px solid #eaeaea;
            border-radius: 4px;
            overflow: hidden;
            width: 28em;
            min-width: 300px;
            margin: 100px auto;
            height: auto;
        }

        .login #content-main {
            width: 100%;
        }

        .login .form-row {
            padding: 4px 0;
            float: left;
            width: 100%;
            border-bottom: none;
        }

        .login .form-row label {
            padding-right: 0.5em;
            line-height: 2em;
            font-size: 1em;
            clear: both;
            color: #333;
        }

        .login .form-row #username, .login .form-row #password {
            clear: both;
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
        }

        .login span.help {
            font-size: 10px;
            display: block;
        }

        .login .submit-row {
            clear: both;
            padding: 1em 0 0 9.4em;
            margin: 0;
            border: none;
            background: none;
            text-align: left;
        }

        .login .password-reset-link {
            text-align: center;
        }

        #header {
            width: auto;
            height: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 40px;
            background: #417690;
            color: #ffc;
            overflow: hidden;
        }

        .btn {
            background: #79aec8;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body class=" login">
<div id="container">
    <!-- Header -->
    <div id="header">
        <div id="branding">
            <h1 id="site-name"><a style="text-decoration: none;" href="">宿舍管理系统</a></h1>
        </div>
    </div>
    <!-- END Header -->
    <div class="main shifted" id="main">
        <div class="content">
            <!-- Content -->
            <div id="content" class="colM">
                <div id="content-main">
                    <form id="login-form">
                        <div class="form-row">
                            <label class="required" for="id_username">用户名:</label> <input type="text"
                                                                                          autofocus=""
                                                                                          autocapitalize="none"
                                                                                          maxlength="150" required=""
                                                                                          id="username">
                        </div>
                        <div class="form-row">
                            <label class="required" for="id_password">密码:</label> <input type="password"
                                                                                         required="" id="password">
                        </div>
                        <div class="submit-row">
{#                            <input type="submit" value="登录" id="login">#}
                            <button type="button" class="btn btn-success col-lg-12" id="login">登录</button>
                        </div>
                    </form>
                </div>
                <br class="clear">
            </div>
            <div id="footer"></div>
        </div>
    </div>
</div>
</body>
<script type='text/javascript' src="/static/js/jquery.min.js"></script>
<script>
    $('#login').click(function () {
        login()
    })

    $(document).keydown(function (e) {
        if (e.keyCode === 13) {
            login()
        }
    })

    function login() {
        if ($('#username').val() === '' || $('#password').val() === '') {
            alert('请输入账号和密码')
            return
        }
        $.ajax({
            type: 'post',
            url: '/login/',
            data: {
                'username': $('#username').val(),
                'password': $('#password').val()
            },
            success: function (res) {
                if (res.code === 200) {
                    window.location.href = "/"
                } else {
                    alert(res.message)
                }
            },
            error: function () {
                console.log('请求失败')
            }
        })
    }

</script>
</html>